﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="~/microsoft/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/flexible.js"></script>
    <script src="~/js/echarts.js"></script>
    <script src="~/js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="~/css/Charts.css" />
    <script>
        var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();//创建并启动连接
    </script>
    <script>
        function fontSize(res) {
            let docEl = document.documentElement,
                clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (!clientWidth) return;
            let fontSize = 100 * (clientWidth / window.screen.width);
            return res * fontSize;
        }
    </script>
</head>
<body>
    <!-- 头部 -->
    <header>
        <h2>维龙备件库可视化</h2>
        <span class="showTime"></span>
        <script src="~/js/showTime.js"></script>
    </header>
    <!-- 主体 -->
    <section class="body-box">
        <!-- 第1列 -->
        <div class="clunmn">
            <div class="panel">
                <h3>今日拣料</h3>
                <div id="c1" class="chart"></div>
                <div class="panelchild"></div>
            </div>
            <div class="panel">
                <h3>今日拣料</h3>
                <div id="c2" class="chart"></div>
                <div class="panelchild"></div>
            </div>
            <div class="panel">
                <h3>今日拣料</h3>
                <div id="c3" class="chart"></div>
                <div class="panelchild"></div>
            </div>
            <div class="panel">
                <h3>今日拣料</h3>
                <div id="c4" class="chart"></div>
                <div class="panelchild"></div>
            </div>
        </div>
        <!-- 第2列 -->
        <div class="clunmn">
            <div class="hd">
                <div class="num">
                    <ul>
                        <li id="L1">12345</li>
                        <li id="L2">23456</li>
                        <li id="L3">34567</li>
                    </ul>
                </div>
                <div class="hdtxt">
                    <ul>
                        <li>今日下达任务</li>
                        <li>今日包装</li>
                        <li>今日出箱单</li>
                    </ul>
                </div>
            </div>
            <div class="bd"></div>
        </div>
        <!-- 第3列 -->
        <div class="clunmn">
            <div class="panel">
                <h3>合同完成周期比</h3>
                <div id="pie1" class="chart"></div>
                <div class="panelchild"></div>
            </div>
            <div class="panel">
                <h3>包装收敛周期</h3>
                <div id="pie2" class="chart"></div>
                <div class="panelchild"></div>
            </div>
            <div class="panel">
                <h3>出箱单收敛周期</h3>
                <div class="chart"></div>
                <div class="panelchild"></div>
            </div>
            <div class="panel">
                <h3>合同收敛周期</h3>
                <div class="chart"></div>
                <div class="panelchild"></div>
            </div>
        </div>
        <script src="~/chart_js/charts.js"></script>
        <script>
            //启动后调用ChatHub类中的SendData方法，由服务器向客户端发送数据
            connection.start().then(function () {
                connection.invoke("SendData").catch(function (err) {
                    return console.error(err.toString());
                });
            }).catch(function (err) {
                return console.error(err.toString());
            });
        </script>
       
        </section>
</body>
</html>